<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
	*{
		padding: 0;
		margin: 0;
	}
	#news{
		width: 500px;
		height: 50px;
		border: 5px solid blue;
		margin: 150px auto;
		position: relative;
		overflow: hidden;
	}
	#news ul{
		position: absolute;
		top: 0;
		left: 0;
	}
	#news ul li{
		width: 500px;
		height: 50px;
		font-size: 20px;
		line-height: 50px;
		text-align: center;
		color: white;
		font-family: 微软雅黑;
		list-style: none;
	}
</style>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
	$(function(){
		
		var c = 0;
		setInterval(function(){
			c++;
			if(c==6){
				$('#news ul').css('top','0');
				c=1;
			}
			
			var top = c*-50;//计算top值
			// 让ul移动到对应的位置
			$('#news ul').animate({'top':top+'px'},500)
		},1000)

	})
</script>
</head>

<body>

	<div id="news">
		<ul>
			<li style="background:purple;">台湾：中国互联网的处女地 难适应互联网思维</li>
			<li style="background:orange;">柳传志、史玉柱：第一代创业家的跌宕人生</li>
			<li style="background:green;">国美质疑网购乱象 大战前自乱阵脚</li>
			<li style="background:blue;">腾讯云香港数据中心即将上线 6月内正式启用</li>
			<li style="background:grey;">顺丰快递联手服装之都再创佳绩</li>
			<li style="background:purple;">台湾：中国互联网的处女地 难适应互联网思维</li>
		</ul>
	</div>

</body>
</html>
